<template>
	<!-- 渠道 -->
	<div class="page">
		<!-- search -->
		<div class=""
			style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<div class="" @click="popBack()">
				<i class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></i>
				<span style="font-size: 16px;">商机管理</span>
			</div>
			  <!-- search -->
            <div
                style="margin-left: 12px;flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;height: 30px;border-radius: 15px;">
                <div class="iconfont icon-sousuo"
                    style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;">
                </div>
                <input type="text" value="" placeholder="请输入关键字搜索"
                    style="font-size: 12px;flex: 1;border: none;background-color: #f1f1f1;" />
                <div style="width: 1px;height: 14px;background-color: #999999;" />
                <div style="font-size: 12px;color: #007AFF;padding:0 5px;width: 40px;">搜索</div>
            </div>
		</div>
		<!-- list -->
		<div class="" style="flex: 1;background-color: #FF0000;overflow-y: auto;">
			<!-- cell -->
			<div @click="loadDetial(item)" v-for="(item,idx) in list" style="padding: 12px;background-color: #FFFFFF;">
				<!-- row1 -->
				<div style="display: flex;align-items: center;flex-direction: row;">
					<div class="" style="display: flex;align-items: center;flex: 1;">
						<div style="font-size: 16px;">{{item.chnName}}</div>
						<div style="font-size: 12px;color: #999999;margin-left: 12px;">{{item.chnType}}</div>
						<div v-if="idx == 1 || idx == 5" style="margin-left: 5px;
							display: flex;align-items: center; background-color: #007AFF30;border-radius: 4px;padding: 2px 5px;">
							<div style="text-align: center;font-size: 12px;color: #007AFF;display: block;">学生</div>
						</div>
					</div>
					<div style="
						display: flex;align-items: center; background-color: #55aa0030;
						padding: 3px 10px;border-style: solid;border-width: 1px;border-color: #55aa00;max-width: 90px;">
						<div style="text-align: center;font-size: 12px;color: #55aa00;display: block;">
							{{["未开始","合作中","合作结束"][item.chnTradeStatus]}}
							</div>
					</div>
				</div>
				<!-- row2 -->
				<div style="flex: 1;flex-direction: column;display: flex;overflow: hidden;">
					<div style="font-size: 12px;color: #999999;margin-top: 5px;">合作时间：{{item.beginTime}}</div>
				</div>
				<!-- row3 -->
				<div
					style="flex: 1;flex-direction: row;display: flex;overflow: hidden;justify-content: space-between;">
					<div style="font-size: 12px;color: #999999;margin-top: 5px;">对接人：{{item.dockPeople}}</div>
					<div style="display: flex;align-items: center;">
						<div style="font-size: 12px;color: #999999;margin-top: 5px;margin-right: 5px;">招生数:</div>
						<div style="font-size: 14px;color: #FF0000;margin-top: 5px;font-weight: bold;">0</div>
					</div>
				</div>
				<!-- line -->
				<div style="height: 1px;background-color: #ebebeb;margin-top: 10px;" />
			</div>
		</div>
	</div>
</template>

<script>
	import { marketList } from "@/api/workbench.js"
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 100,
				// list: [{chnTradeStatus:0,beginTime:"2021年10月27日20:05:28",dockPeople:"张三",chnType:"bb"}]
				list: []
			}
		},
		mounted() {
			this.netMarketList();
		},
		methods: {
			popBack() {
				this.$router.back({

				})
			},
			loadDetial(data) {
				this.$router.push({
					path: "/busniess_detail",
                    query:{id:data.id}
				})
			},
			netMarketList() {
				let fi = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				let self = this;
				marketList(fi).then(res => {
					let { data } = res;
					let { record } = data;
					self.list = record;
				}).catch(e => {
					console.error(e)
				})
			}

		}
	}
</script>

<style scoped>
	.page {
		background-color: #f4f5f7;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		display: flex;
	}
</style>
